---
title: 编辑器or富文本
author: ajn404
pubDatetime: 2023-09-18T09:35:28Z
postSlug: editor
featured: false
draft: false
tags:
  - affine
  - editor
  - lit
  - codemirror
description:
  "关于实施博客系统内构建博客编辑器的计划的开始"
---


## start demo use blocksuite (notion 风格)

import Editor from '@components/react/editor/index.tsx'

<Editor client:only="react"/>


```tsx
import '@blocksuite/editor/themes/affine.css';
import { useEffect, useRef } from 'react';

export default () => {
    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        import('@blocksuite/editor').then((res) => {
            const editor = new res.SimpleAffineEditor();
            ref.current?.appendChild(editor)
        })
    })
    return <>
        <div className="editor" ref={ref}></div>
    </>
}
```

[blocksuite全屏](/mono_notes/editor)

## codemirror

import Javacript from "@components/vue/codemirror/javascript.vue"

<Javacript client:only="vue"/>


vue

```vue
<script setup  name="javascript">
import useJavaScript from './cJavascript';
useJavaScript();
</script>

<template>
    <div id="editor">
    </div>
</template>
```

composition api
```ts
let useJavascript ;

import { EditorView, basicSetup } from "codemirror"
import { javascript } from "@codemirror/lang-javascript"
import { ref, shallowRef, nextTick } from 'vue'


export default  useJavascript = ()=>{
    nextTick(() => {
        const parent = document.querySelector("#editor");
        let view = new EditorView({
            extensions: [basicSetup, javascript()],
            parent: parent || document.body
        })
    })
}
```


### 链接

- [lit](https://lit.dev/)
- [start](https://blocksuite.affine.pro/getting-started.html)
- [stackblitz](https://stackblitz.com/github/toeverything/blocksuite?file=packages%2Fplayground%2Fapps%2Fdefault%2Fcomponents%2Fquick-edgeless-menu.ts)
- [codemirror](https://codemirror.net/)